<template>
    <div class="GradeImg">
        <img class="grade-img" v-if="grade === 1" src="../../assets/imgs/blog1.png" alt="">
        <img class="grade-img" v-if="grade === 2" src="../../assets/imgs/blog2.png" alt="">
        <img class="grade-img" v-if="grade === 3" src="../../assets/imgs/blog3.png" alt="">
        <img class="grade-img" v-if="grade === 4" src="../../assets/imgs/blog4.png" alt="">
        <img class="grade-img" v-if="grade === 5" src="../../assets/imgs/blog5.png" alt="">
    </div>
</template>

<script>
    export default {
        name: 'GradeImg',
        data() {
            return {};
        },
        props: {
            grade: {
                type: Number,
                default: 1,
            }
        },
        methods: {},
        mounted() {
        },
        components: {}
    }
</script>

<style scoped lang='less'>

    .grade-img {
        cursor: pointer;
        margin-left: 5px;
        width: 25px;
        height: 25px;
    }
</style>